<!-- 对 button 组件的编辑 -->
<template>
  <div class="button-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose" ref="settingComponentDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName">
          <el-tab-pane label="设置" name="1">
            <el-form :label-width="formLabelWidth">
              <el-form-item label="文件名称" :error="errorMessage" style="margin-bottom:0;">
                <el-input v-model="data.file.originalFilename" :value="data.file.originalFilename" placeholder="输入长度不超过32个字符的名称" maxlength="32" size="small" style="width:300px;">
                </el-input>
              </el-form-item>
              <el-form-item label="选择文件" style="margin-bottom:0;">
                <el-button type="primary" size="small" @click.stop="chooseFile">点击上传文件</el-button>
                <span class="spn">仅支持txt,pdf,xla,xls,xlsx,xlt,xlw,zip,rar,doc,docx格式，在线预览功能仅支持pdf文档。</span>
                <div v-if="fileInfo && fileInfo.id">
                  <div class="dffr">
                    <div class="file-image-icon">
                      <img :src="require('@/assets/images/icon_suffix/'+fileInfo.suffix+'.png')" alt="file-icon"
                        style="max-width:40px;max-height:40px;">
                    </div>
                    <div class="file-name black">
                      {{fileInfo.originalFilename}}
                    </div>
                    <div class="opt">
                      <el-button type="text" @click.stop="deleteFile()"><i class="el-icon-delete"></i></el-button>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="样式选择" style="margin-bottom:0px;">
                <div class="icon-classifyType-list">
                  <ul class="clearfix">
                    <li v-for="listitem in 4" :key="listitem" :class="{selected: parseInt(data.theme) === listitem}"
                      @click="chooseListType(listitem)">
                      <div class="item">
                        <div class="icon"><i :class="['list-type', 'list-type' + listitem]"></i></div>
                      </div>
                    </li>
                  </ul>
                </div>
              </el-form-item>
            </el-form>
            <el-row>
              <el-col :span="12">
                <Color :defValue="data.titleStyle.color" :chgValue="(d)=>{data.titleStyle.color = d}" />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <FontFamily :defValue="data.titleStyle.fontFamily" :chgValue="(d)=>{data.titleStyle.fontFamily = d}" />
              </el-col>
              <el-col :span="12">
                <FontWeight :defValue="data.titleStyle.fontWeight" :chgValue="(d)=>{data.titleStyle.fontWeight = d}" />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <FontSize :defValue="data.titleStyle.fontSize" :chgValue="(d)=>{data.titleStyle.fontSize = d}" />
              </el-col>
              <el-col :span="12">
                 <FontStyle :defValue="data.titleStyle.fontStyle" :chgValue="(d)=>{data.titleStyle.fontStyle = d}" />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" v-if="parseInt(data.theme) === 1 || parseInt(data.theme) === 3">
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="点击下载" style="margin-bottom:0px;">
                    <el-input size="mini" v-model="data.listText.downloadText" maxlength="64"></el-input>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12" v-if="parseInt(data.theme) === 1">
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="在线预览" style="margin-bottom:0px;">
                    <el-input size="mini" v-model="data.listText.previewText" maxlength="64"></el-input>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>

    <!-- 选择资源文件 -->
    <ChooseRepertory ref="chooseRepertory" />
  </div>
</template>

<script>
import Color from '@/components/common/design/dialog/component/formitem/Color.vue'
import FontFamily from '@/components/common/design/dialog/component/formitem/FontFamily.vue'
import FontWeight from '@/components/common/design/dialog/component/formitem/FontWeight.vue'
import FontSize from '@/components/common/design/dialog/component/formitem/FontSize.vue'
import FontStyle from '@/components/common/design/dialog/component/formitem/FontStyle.vue'
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTFILE, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data
      this.fileInfo = bjComponent._other.fileList.hrepertory
    })
  },
  mounted () {
  },
  data () {
    return {
      dialogShow: false,
      activeName: '1',
      formLabelWidth: '120px',
      name: '文件下载',
      bjComponent: null,
      data: null,
      // 错误信息
      errorMessage: '',
      fileInfo: {}
    }
  },
  methods: {
    // 选择下载资源文件
    chooseFile () {
      this.$refs['chooseRepertory'].show({ title: '选择文件', where: { type: [1] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          let repertory = repertoryList[0]
          if ((!this.data.file.originalFilename || (this.fileInfo && this.fileInfo.originalFilename && this.data.file.originalFilename === this.fileInfo.originalFilename))) {
            this.data.file.originalFilename = repertory.originalFilename
          }
          this.bjComponent._other.fileList.hrepertory = _.cloneDeep(repertory)
          this.fileInfo = _.cloneDeep(repertory)
          let file = {
            originalFilename: this.data.file.originalFilename,
            suffix: repertory.suffix,
            size: repertory.size
          }
          this.data.file = Object.assign({}, this.data.file, file)
        }
      })
    },
    // 显示错误以及 focus
    showErrorMessage (errorMessage) {
      this.errorMessage = errorMessage
    },
    chooseListType (listitem) {
      if (listitem === parseInt(this.data.theme)) {
        return
      }
      this.data.theme = listitem
    },
    // 删除 file
    deleteFile () {
      this.bjComponent._other.fileList.hrepertory = null
      this.fileInfo = {}
      let file = {
        originalFilename: this.data.file.originalFilename,
        suffix: '',
        size: 0
      }
      this.data.file = Object.assign({}, this.data.file, file)
    },
    close () {
      this.dialogShow = false
      this.activeName = '1'
      this.name = '文件下载'
      this.bjComponent = null
      this.data = null
      this.errorMessage = ''
      this.fileInfo = {}
    },
    saveclose () {
      this.bjComponent.render.data = _.cloneDeep(this.data)
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    ChooseRepertory,
    Color,
    FontFamily,
    FontWeight,
    FontSize,
    FontStyle
  }
}

</script>

<style scoped lang="scss">
.edit-container-u {
  width: 840px;
  min-height: 410px;
  min-height:calc(100vh - 300px);
}
.spn{
  margin-left: 15px;
  color: #666;
  font-size: 12px;
}
.dffr{
  margin-top: 5px;
  line-height: 1.3;
  .opt {
    margin-left: 28px;
    .el-icon-delete{
      font-size: 18px;
      &:hover{
        color:#0480FB;
      }
    }
  }
}
.file-name{
  margin-left: 10px;
  margin-top:8px;
  line-height: 2;
}
.icon-classifyType-list {
  ul {
    list-style: none;
  }
  li {
    float: left;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    .list-type {
      background: url(~@/assets/images/componentFileStyle.png) no-repeat center;
      display: inline-block;
      *display: inline;
      *zoom: 1;
      vertical-align: middle;
      width: 73px;
      height: 58px;
    }
    .list-type1 {
      background-position: 0 0;
    }
    .list-type2 {
      background-position: -88px 0;
    }
    .list-type3 {
      background-position: -176px 0;
    }
    .list-type4 {
      background-position: -264px 0;
    }
    &.selected .list-type{
      background-image: url(~@/assets/images/componentFileStyle_selected.png);
    }
  }
}
</style>
